<template>
  <a-card :bordered="false">
    <van-search placeholder="请选择条件查询" readonly @click="showSearchPopup" style="margin-top: -10px;width: 100%;padding: 0px;margin-bottom: 10px"/>
    <div>
      <div class="list">
        <van-list
          v-model="loading"
          :finished="finished"
          offset="100"
          finished-text="没有更多了"
          @load="onLoadList"
          :immediate-check="false"
        >
          <div
            class="customer-list"
            v-for="(item,i) in dataSource"
            :key="i"
            @click="moreLog(item)"
          >
            <div>
              <div class="name">客户名称：{{ item.ghCustomerInfo.name }}</div>
              <div class="contact">
                <span>电话：{{ item.ghCustomerInfo.phone || '无' }}</span>
                <span style="margin-left: 20px;">地址：{{ item.ghCustomerInfo.address||'无' }}</span>
              </div>
              <div class="contact">
                <span>施工任务名称：{{ item.progressItemName || '无' }}</span>
                <span style="margin-left: 20px;">业主是否可见：
                  <a-tag color="orange" v-if="item.isShow == 0">不展示</a-tag>
                  <a-tag color="green" v-else>展示</a-tag>
                </span>
              </div>
              <div class="contact">
                <span>最新日志内容：{{ item.content || '无' }}</span>
              </div>
              <div class="contact">
                <span>创建人：{{ item.createBy || '无' }}</span>
                <span style="margin-left: 20px;">创建时间：{{ item.createTime||'无' }}</span>
              </div>
            </div>
          </div>
        </van-list>
      </div>
    </div>

    <van-popup v-model="showSearchPopupFlag" position="top" >
      <a-card :bordered="false">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <div>客户名称：<a-input placeholder="请输入客户姓名" v-model="queryParam.customerName"></a-input></div>
          <div style="margin-top: 5px">对业主是否展示：
            <van-dropdown-menu>
              <van-dropdown-item v-model="value1" :options="option1" @change="handleChangeIsShow"/>
            </van-dropdown-menu>
          </div>
          <div style="margin-top: 5px">创建人：
            <van-dropdown-menu>
              <van-dropdown-item v-model="value2" :options="userOption" @change="changeCreateBy"/>
            </van-dropdown-menu>
          </div>
          <a-row :gutter="24" style="margin-bottom: 10px;margin-top: 10px">
            <a-col :span="12">
              <a-button type="primary" style="width: 100%" @click="searchQuery" icon="search">查询</a-button>
            </a-col>
            <a-col :span="12">
              <a-button type="primary" @click="searchReset" icon="reload" style="width: 100%">重置</a-button>
            </a-col>
          </a-row>
        </a-form>
      </a-card>
    </van-popup>
    <log-detail-modal ref="logDetailModal"></log-detail-modal>
  </a-card>
</template>

<script>

  import '@/assets/less/TableExpand.less'
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import logDetailModal from "./modules/logDetailModal";
  import {getAction} from "../../../../api/manage";

  export default {
    name: 'dailydiaryList',
    mixins:[JeecgListMixin, mixinDevice],
    components: {
      logDetailModal
    },
    data () {
      return {
        description: '施工日志表管理页面',
        // 表头
        columns: [
          {
            title: '#',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title:'客户名称',
            align:"center",
            dataIndex: 'ghCustomerInfo.name',
            scopedSlots: { customRender: 'customerName' },
          },
          {
            title:'项目地址',
            align:"center",
            dataIndex: 'ghCustomerInfo.address',
          },
          {
            title:'施工任务名称',
            align:"center",
            dataIndex: 'progressItemName'
          },
          {
            title:'最新日志内容',
            align:"center",
            dataIndex: 'content',
            customCell:() => {
              return {
                style: {
                  wordWrap:'break-word',
                  wordBreak:'break-all',
                  whiteSpace:'normal',
                  minHeight:'50px',
                  width: '700px',
                }
              }
            }
          },
          {
            title:'业主是否可见',
            align:"center",
            dataIndex: 'isShow',
            customRender:function (text) {
              return text == 0 ? '不展示':'展示'
            }
          },
          {
            title:'创建人',
            align:"center",
            dataIndex: 'createBy'
          },
          {
            title:'日志创建时间',
            align:"center",
            dataIndex: 'createTime'
          },
          /*{
            title: '操作',
            dataIndex: 'action',
            align:"center",
            fixed:"right",
            width:147,
            scopedSlots: { customRender: 'action' }
          }*/
        ],
        url: {
          list: "/ghConstructLog/list",
          delete: "/ghConstructLog/delete",
          queryUserList: "/erp/user/selectUserByDepartId",
          queryDepartTreeList: "/erp/user/selectDepartTreeList",
        },
        labelCol: {
          xs: {span: 24},
          sm: {span: 5},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 16},
        },
        dictOptions:{},
        superFieldList:[],
        createByData:[],    //创建人列表
        model:{},
        /* 查询条件-请不要在queryParam中声明非字符串值的属性 */
        queryParam: {},
        dataSource:[],
        dataFields: {
          title: 'departName',
          key: 'id',
          value: 'id',
          children: "children"
        },
        currentDepartId: "",  //当前所选部门
        departListData:[],    //部门列表
        loading: false,
        finished: false,
        showSearchPopupFlag: false,
        value1: "",
        option1: [
          { text: '全部', value: "" },
          { text: '展示', value: 1 },
          { text: '不展示', value: 0 },
        ],
        value2: "",
        userOption: [
          {text:'全部',value:""}
        ],
      }
    },
    created() {
      //this.loadData();
      this.loadDepartTreeListData();
      this.loadUserListData();
    },
    computed: {
      importExcelUrl: function(){
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      },
    },
    methods: {
      showSearchPopup(){
        this.showSearchPopupFlag = true
      },
      searchQuery(){
        this.loadData(1);
        this.selectedRowKeys = []
        this.selectedRows = []
        this.showSearchPopupFlag = false
      },
      searchReset() {
        this.value1 = ""
        this.value2 = ""
        this.queryParam = {}
        this.selectedRowKeys = []
        this.selectedRows = []
        this.showSearchPopupFlag = false
        this.loadData(1);
      },
      handleChangeIsShow(value){
        this.showSearchPopupFlag = false
        this.queryParam.isShow = value;
        this.loadData(1)
      },
      //加载用户列表
      loadUserListData() {
        getAction(this.url.queryUserList).then((res) => {
          if (res.success) {
            this.createByData = res.result.records||res.result;
            for (let i=0;i<this.createByData.length;i++){
              this.userOption.push({
                text: this.createByData[i].realname,
                value: this.createByData[i].realname
              })
            }
          }
        })
      },
      changeCreateBy(value){
        this.showSearchPopupFlag = false
        this.queryParam.createBy = value
        this.loadData(1);
      },
      filterOptionCreateBy(input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        );
      },
      /*initDictConfig(){
      },*/
      moreLog(record){
        let key = 11;
        this.$router.push({ path: "/infoTab", query: {id: record.customerId, name: record.ghCustomerInfo.name, key: "14"}});
      },
      modalFormOk(){

      },
      onLoadList(e){
        this.ipagination.current++
        this.loadData(this.ipagination.current)
      },
      loadData(arg) {
        if (!this.url.list) {
          this.$message.error("请设置url.list属性!")
          return
        }
        //加载数据 若传入参数1则加载第一页的内容
        if (arg === 1) {
          this.ipagination.current = 1;
          this.dataSource = []
          this.finished = false;
        }
        var params = this.getQueryParams();//查询条件
        this.loading = true;
        getAction(this.url.list, params).then((res) => {
          if (res.success) {
            //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
            this.dataSource = [...this.dataSource, ...res.result.records]
            if (res.result.total) {
              this.ipagination.total = res.result.total;
            } else {
              this.ipagination.total = 0;
            }
            //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
          } else {
            this.$message.warning(res.message)
          }
          if(res.result.records.length<10){
            this.finished = true;
          }
        }).finally(() => {
          this.loading = false
        })
      },
      //加载部门树形列表
      loadDepartTreeListData(){
        getAction(this.url.queryDepartTreeList).then((res) => {
          if (res.success) {
            this.departListData = res.result.records||res.result;
          }
        })
      },
      changeDepart(value){
        this.currentDepartId = value;
        this.loadUserListData();
      },
      getIsShow(value){
        if (value == 0){
          return "不展示"
        }else {
          return "展示"
        }
      }
    }
  }
</script>
<style scoped lang="less">
  @import '~@assets/less/common.less';
  /deep/ .van-dropdown-menu__bar{
    height: 30px;
    box-shadow: none;
    border: 1px solid lightgrey;
    border-radius: 5px;
  }

  .select-pk{
    display:flex;
    align-items:center;
    margin:10px 0;
    &>span{
      font-weight: bold;
    }
    &-text{
      width: calc(100% - 6em);
      height: 30px;
      text-indent: 1em;
      line-height: 28px;
      border: 1px solid #d9d9d9;
      border-radius: 4px;
    }
  }
  .list{
    overflow-y: scroll;
    height:100vh;
    margin-top: 10px;
  }
  ::-webkit-scrollbar {
    display: none;
  }
  .customer-list{
    /*display: flex;*/
    align-items: center;
    border-top: 1px solid #d9d9d9;
    .name{
      font-size: 13px;
      color: #161616;
      line-height: normal;
      margin-top: 5px;
    }
    .contact{
      margin-top: 5px;
      font-size: 12px;
      color: #a39f9f;
      margin-bottom: 5px;
    }
  }
</style>